// createRouter 创建路由实例用的
// createWebHistory 创建路由模式用的 History(h5) 模式 路径好看美观，容易 404（有服务器配合就好）
// createWebHashHistory 创建路由模式用的  Hash 模式  带有 # 号，不需要服务器配合，SEO搜索引擎优化（让目标用户更容易找到网站内容） 不太友好
// createMemoryHistory 创建路由模式用的 Memory 模式  ssr服务器端渲染，前后端没有分离（php前后端可写）
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory } from 'vue-router'
// 导入组件
import Home from '../views/Home.vue'
const routes = [
  {
    // 路由路径
    path: '/',
    // 路由名称
    // 当path过于复杂，也可以使用name属性来跳转
    name: 'home',
    // 进入页面路径后打开的页面组件
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // 路由懒加载，什么时候用，就加载
    // 不经常打开的页面使用懒加载
    component: () => import('../views/About.vue')
  }
]
// 创建路由实例
const router = createRouter({
  // 配置路由模式  import.meta.env.BASE_URL//服务器根地址 “/”
  history: createWebHistory(import.meta.env.BASE_URL),
  // history: createWebHashHistory(import.meta.env.BASE_URL),
  // 配置路由的规则
  routes
})
// 暴露路由实例
export default router
